<template>
  <div class="login">
    <!-- 头部 -->
    <NavigationBar title="登录"></NavigationBar>
    <div class="main">
      <img class="log" :src="require('@/assets/LoginLog.png')" alt="">
      <div class="content">
        <van-form @submit="onSubmit">
          <!-- 手机号 -->
          <van-field
            class="phone"
            type="tel"
            v-model="phone"
            name="phone"
            placeholder="请输入您的手机号"
          />
          <!-- 密码 -->
          <van-field
            class="password"
            type="password"
            v-model="password"
            name="password"
            placeholder="请输入您的密码"
          />
          <van-button class="sub" round block type="info" native-type="submit">登录</van-button>
          <div class="link">
            <router-link :to="{name:'register',params:{phone:this.phone}}">去注册</router-link>
            <router-link :to="{name:'forget',params:{phone:this.phone}}">忘记密码</router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      phone: '',
      password: '',
    }
  },
// 侦听器
  watch: {
    phone() {
      this.vuexPhone = this.phone
    }
  },
// 计算属性
  computed: {},
// 事件
  methods: {
    onSubmit(values) {
      if (this.phone === "") {
        this.$toast('请填将账号填写完整');
        return
      }
      if (this.password === "") {
        this.$toast('请填将密码填写完整');
        return
      }
      this.$ajax.login({username: this.phone, password: this.password}).then(res => {
        if (res.error_code === 0) {
          this.vuexUserInfo = res
          this.$toast('登录成功');
          this.vuexPhone = this.phone
          this.gotoPage("home")
        } else {
          this.$toast(res.error_desc)
        }
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.phone = this.vuexPhone
  }
}
</script>

<style lang="scss" scoped>
.login {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 84px;

    .log {
      width: 100px;
      height: 70px;
    }

    .content {
      width: 100%;
      padding: 40px 50px;

      .phone, .password {
        background-color: transparent;
        box-sizing: content-box;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        height: 30px;
        line-height: 30px;
        display: block;
        font-size: 16px;
        min-height: 1.4em;
        overflow: hidden;
        margin-bottom: 10px;
      }

      .sub {
        background-color: #eb0018;
        color: #fff;
        margin-top: 50px;
        border-radius: 5px;
        border: 0;
        font-size: 18px;
      }

      .link {
        text-align: center;
        margin-top: 40px;
        font-size: 14px;
        color: #4a4a4a;

        a {
          font-size: 14px;
          color: #4a4a4a;
          border-right: 1px solid #eee;
        }

        a:first-child {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>